<!-- 危化品车进出记录 -->
<template>
  <div class="dy-panel">
    <div class="dy-panel-main" style="width: 90vh">
      <div class="dy-panel-header">
        <div class="dy-panel-close" @click="closeCurrent"></div>
      </div>
       <div class="dy-panel-content">
        <contentTitle :title="'招商情况'"></contentTitle>
        <div class="dy-col">
          <div class="dy-col6">
            <div class="dy-chart" ref="s1Ref"></div>
            <div class="yd-chart-info">
              <div class="word">总店铺数</div>
              <div class="value">276</div>
            </div>
            <div class="yd-chart-info">
              <div class="word">已&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;招</div>
              <div class="value">132</div>
            </div>
          </div>
          <div class="dy-col6">
            <div class="dy-chart" ref="s2Ref"></div>
            <div class="yd-chart-info">
              <div class="word">总面积</div>
              <div class="value">39230</div>
            </div>
            <div class="yd-chart-info">
              <div class="word">已&nbsp;&nbsp;&nbsp;&nbsp;招</div>
              <div class="value">12486</div>
            </div>
          </div>
        </div>
      </div>

      <div class="layer-bottom">
        <div class="pd_abItems-contain">
          <div class="block_select_contain">
            <el-cascader :options="selectOptions" :show-all-levels="false" placeholder="请选择服务区"
                         @change="serverHandleChange" v-model="curServer" filterable clearable></el-cascader>
          </div>
          <div class="pd_abItems-main">
            <div v-for="(item,index) in abItems" :class="{'pd_abItem-item':true,'selected':item.clazz === 'selected'}" @click="abItemsClick(item)">{{item.title}}</div>
          </div>
          <div class="pd-abItem-search" style="position: relative">
            <button class="pd-abItem-search-btn" @click="search">查询</button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import {computed, getCurrentInstance, onMounted, ref} from "vue";
import ContentTitle from "../contentTitle.vue";
import {drawLine} from "../../../util/chartUtil.js";
import {ajaxRequest} from "../../../api/code.js";
const chart = getCurrentInstance().proxy.$echarts

const emit = defineEmits(['closeChild']);
const closeCurrent = function (){
  emit('closeChild')
}

const curServer = ref("");

//设置服务区下拉框值
const selectOptions = ref([{
  id: 24193,
  value: '河北高速燕赵驿行集团有限公司',
  label: '河北高速燕赵驿行集团有限公司',
  children: [{
    id: 349,
    value: '滦州服务区',
    label: '滦州服务区'
  }, {
    id: 0,
    value: '丰润停车区',
    label: '丰润停车区'
  }]
}])

const serverHandleChange = (selectItem) => {
  curServer.value = selectItem
}
const abItems = ref([{title:'AB区',clazz:'selected'},{title:'A区',clazz:''},{title:'B区',clazz:''}])
const abItemsClick = function (item){
  abItems.value.forEach((res,i)=>{
    res.clazz = res.title === item.title?'selected':"";
  })
}

const search = function (){
  refreshData()
}

const s1Ref = ref();
const yzValue = ref(132); //已招
const zsValue = ref(276); //总数

const getOp1 = function () {
  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.seriesName}`;
      }
    },
    grid: {
      top: '20%',
      containLabel: true,
    },
    angleAxis: {
      show: false,
      max: zsValue.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '60%'],
      radius: '160'
    },
    series: [{
      type: 'bar',
      name: '已招',
      data: [{ //上层圆环，显示数据
        value: yzValue.value,
        itemStyle: {
          color: '#FB4D8F',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
      { //下层圆环，显示最大值
        type: 'bar',
        name: '总店铺数',
        data: [{
          value: zsValue.value,
          itemStyle: {
            color: '#34BAC6',
            borderWidth: 0,
          },
        }],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 1
      },
      //仪表盘
      {
        type: 'gauge',
        startAngle: 180, //起始角度，同极坐标
        endAngle: 0, //终止角度，同极坐标
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: { // 分隔线
          show: false,
          width: 0
        },
        itemStyle: {
          color: '#70D5FF'
        },
        detail: {
          formatter: function (params) {
            return '{a|' + (yzValue.value*100/zsValue.value).toFixed(0) + '%}\n{b|数量}';

          },
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#FFF',
                fontWeight: 'bold',
                lineHeight: 10
              },
              b: {
                fontSize: 14,
                color: '#FFF',
                lineHeight: 40
              },
              c: {
                fontSize: 12,
                color: '#FFF',

              },
              d: {
                fontSize: 12,
                color: '#1F85F5'
              }
            }
          },
          offsetCenter: [0, 14],
        },
        title: {
          show: false
        },
        data: [{
          // value: yzgValue2 * 100 / buhegeValue2.value
        }]
      }
    ]
  }
}

const s2Ref = ref();
const yzValue2 = ref(12486); //已招
const zsValue2 = ref(39230); //总数

const getOp2 = function () {
  return {
    tooltip: {
      trigger: 'item',
      formatter: function (params) {
        return `${params.seriesName}`;
      }
    },
    grid: {
      top: '20%',
      containLabel: true,
    },
    angleAxis: {
      show: false,
      max: zsValue2.value,
      type: 'value',
      startAngle: 180, //极坐标初始角度
      endAngle: 0,
      splitLine: {
        show: false
      }
    },
    barMaxWidth: 15, //圆环宽度
    radiusAxis: {
      show: false,
      type: 'category',
    },
    //圆环位置和大小
    polar: {
      center: ['50%', '60%'],
      radius: '160'
    },
    series: [{
      type: 'bar',
      name: '已招',
      data: [{ //上层圆环，显示数据
        value: yzValue2.value,
        itemStyle: {
          color: '#FB4D8F',
        },
      }],
      barGap: '-100%', //柱间距离,上下两层圆环重合
      coordinateSystem: 'polar',
      roundCap: true, //顶端圆角
      z: 3 //圆环层级，同zindex
    },
      { //下层圆环，显示最大值
        type: 'bar',
        name: '总店铺数',
        data: [{
          value: zsValue2.value,
          itemStyle: {
            color: '#029EE1',
            borderWidth: 0,
          },
        }],
        barGap: '-100%',
        coordinateSystem: 'polar',
        roundCap: true,
        z: 1
      },
      //仪表盘
      {
        type: 'gauge',
        startAngle: 180, //起始角度，同极坐标
        endAngle: 0, //终止角度，同极坐标
        axisLine: {
          show: false,
        },
        splitLine: {
          show: false
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false
        },
        splitLabel: {
          show: false
        },
        pointer: { // 分隔线
          show: false,
          width: 0
        },
        itemStyle: {
          color: '#70D5FF'
        },
        detail: {
          formatter: function (params) {
            return '{a|' + (yzValue2.value*100/zsValue2.value).toFixed(0) + '%}\n{b|面积}';

          },
          textStyle: {
            rich: {
              a: {
                fontSize: 24,
                color: '#FFF',
                fontWeight: 'bold',
                lineHeight: 10
              },
              b: {
                fontSize: 14,
                color: '#FFF',
                lineHeight: 40
              },
              c: {
                fontSize: 12,
                color: '#FFF',

              },
              d: {
                fontSize: 12,
                color: '#1F85F5'
              }
            }
          },
          offsetCenter: [0, 14],
        },
        title: {
          show: false
        },
        data: [{
          // value: yzgValue2 * 100 / buhegeValue2.value
        }]
      }
    ]
  }
}

let s1Chart,s2Chart;
onMounted(() => {
  s1Chart = drawLine(s1Ref.value,getOp1())
  s2Chart = drawLine(s2Ref.value,getOp2())
  getFwqxx()
})


async function refreshData() {
  
}


/**
 * 获取服务区档案信息
 */
 async function getFwqxx() {
  selectOptions.value[0].children = []
  const result = await ajaxRequest('post', 'getFwqxx', {})
  if (result.data && result.data.length>0) {
    result.data.forEach((item,index)=>{
      selectOptions.value[0].children.push({id:item.id,value:item.id,label:item.compname})
    })
  }
}
</script>

<style scoped>
.dy-panel-main{
  padding:2.5vh;
}

.layer-bottom{
  padding-left:5vh;
  padding-top: 2vh;
  padding-bottom: 1vh;
  border-top: 2px solid #1D4F59;
}

:deep(.el-input__wrapper){
  background-color: transparent !important;
  color: #FFFFFF !important;
  height: 3vh;
  flex-grow: 0.5 !important;
  width: 16.3vh;
  margin-right: 2vh;
}
:deep(.custom-date-picker){
  width: 22vh !important; /* 确保您的样式被应用 */
}
:deep(.el-date-editor .el-range-input){
  color: #FFFFFF !important;
}
:deep(.el-date-editor .el-range-separator){
  color: #FFFFFF !important;
}
.dy-col{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  text-align: center;
  .dy-col6{
    width: 50%;
  }
  .yd-chart-info{
    display: flex;
    justify-content: center;
    padding-bottom: 20px;
    .word{
      width: 80px;
      display: flex;
      flex-wrap: wrap;
      text-align: justify;
      text-align-last: justify;
    }
  }
}
.dy-chart{
  height: 160px;
}
</style>